<!-- Dom模板 -->
<template>
  <div>
    <!-- Dom内容 -->
    <div class="CF_box">
      <div class="CF_top">
        <div
          class="iconfont icon-arrow-right-copy-copy-copy"
          @click="close()"
        ></div>
        <div>书单分类</div>
      </div>
      <div class="CF_main">
        <div class="CF_title">
          <div>分类榜单</div>
          <!-- <div>
            更多<span class="iconfont icon-arrow-right-copy-copy-copy"></span>
          </div> -->
        </div>
        <div>
          <!-- VIP -->
          <div class="CF_List" @click="closeTitle('vip')">
            <div>
              <img :src="vipBookUrl" />
            </div>
            <div class="CF_right">
              <div>VIP专区</div>
              <div>
                <!-- @click="liClick(item)" -->
                <div v-for="(item, index) in vipBook" :key="index">
                  <span>{{ index + 1 }}.</span>{{ item.bookname }}
                </div>
              </div>
            </div>
          </div>
          <!-- 畅销榜 -->
          <div class="CF_List" @click="closeTitle('畅销书')">
            <div>
              <img :src="changxiaoBookUrl" />
            </div>
            <div class="CF_right">
              <div>畅销榜</div>
              <div>
                <div v-for="(item, index) in changxiaoBook" :key="index">
                  <span>{{ index + 1 }}.</span>{{ item.bookname }}
                </div>
              </div>
            </div>
          </div>
          <div class="CF_List" @click="closeTitle('男生')">
            <div>
              <img :src="boyBookUrl" />
            </div>
            <div class="CF_right">
              <div>男生小说榜</div>
              <div>
                <div v-for="(item, index) in boyBook" :key="index">
                  <span>{{ index + 1 }}.</span>{{ item.bookname }}
                </div>
              </div>
            </div>
          </div>
          <div class="CF_List" @click="closeTitle('女生')">
            <div>
              <img :src="girlBookUrl" />
            </div>
            <div class="CF_right">
              <div>女生小说榜</div>
              <div>
                <div v-for="(item, index) in girlBook" :key="index">
                  <span>{{ index + 1 }}.</span>{{ item.bookname }}
                </div>
              </div>
            </div>
          </div>
          <div class="CF_List" @click="closeTitle('儿童')">
            <div>
              <img :src="childBookUrl" />
            </div>
            <div class="CF_right">
              <div>儿童小说榜</div>
              <div>
                <div v-for="(item, index) in childBook" :key="index">
                  <span>{{ index + 1 }}.</span>{{ item.bookname }}
                </div>
              </div>
            </div>
          </div>
          <div class="CF_List" @click="closeTitle('相声说书')">
            <div>
              <img :src="xiangshengBookUrl" />
            </div>
            <div class="CF_right">
              <div>相声小说榜</div>
              <div>
                <div v-for="(item, index) in xiangshengBook" :key="index">
                  <span>{{ index + 1 }}.</span>{{ item.bookname }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="CF_channel">
        <div class="CF_title" style="padding: 0 3px">
          <div>频道分类</div>
          <div style="color: #b1b1b1">优质好频道随心听</div>
        </div>
        <div class="CF_Cbottom">
          <div
            v-for="(item, index) in channelList"
            :key="index"
            @click="showBox(item)"
          >
            {{ item }}
          </div>
        </div>
      </div>
    </div>
    <van-popup v-model="show" position="bottom" :style="{ height: '100%' }">
      <van-nav-bar
        :title="alertTitle"
        left-text=""
        left-arrow
        @click-left="onClickLeft"
      />
      <div class="alertmain">
        <div
          class="BA_ulItem"
          v-for="(item, index) in alertList"
          @click="liClick(item)"
          :key="index"
        >
          <div><img :src="item.book_img_url" /></div>
          <div>{{ item.bookname }}</div>
          <div>共10集</div>
        </div>
      </div>
    </van-popup>
    <van-popup
      v-model="showFlag"
      position="right"
      :style="{ width: '100%', height: '100%' }"
    >
      <van-nav-bar
        :title="hotTitle"
        left-text=""
        left-arrow
        @click-left="onClickClose"
      />
      <div class="hotmain">
        <!-- <div></div> -->
        <div
          class="HM_ulItem"
          v-for="(item, index) in hotList"
          @click="liClick(item)"
          :key="index"
        >
          <div>{{ index + 1 }}</div>
          <div><img :src="item.book_img_url" /></div>
          <div class="leftAlert">
            <div>{{ item.bookname }}</div>
            <div>{{ item.describes }}</div>
            <div>共10集</div>
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
// import a from './a'; // 引入组件
export default {
  data() {
    return {
      msg: "测试",
      vipBook: [],
      changxiaoBook: [],
      boyBook: [],
      girlBook: [],
      childBook: [],
      xiangshengBook: [],

      vipBookUrl: "",
      changxiaoBookUrl: "",
      boyBookUrl: "",
      girlBookUrl: "",
      childBookUrl: "",
      xiangshengBookUrl: "",
      channelList: [
        "推荐",
        "VIP",
        "畅销书",
        "男生",
        "女生",
        "儿童",
        "相声说书",
        "历史",
        "人文",
        "励志",
        "头条",
        "新闻",
        "情感生活",
        "财经频道",
        "健康养生",
        "英语",
        "少儿教育",
        "科技",
        "健康养生",
        "小语种",
        "戏曲",
        "国学",
        "旅游",
        "二次元",
        "时尚生活",
        "体育",
        "汽车",
      ],
      show: false,
      showFlag: false,
      hotList: [],
      alertList: [],
      alertTitle: "",
      hotTitle: "",
    };
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {
    this.$store.dispatch("homes/getDataChange", "vip").then((res) => {
      this.vipBook = res.info.slice(0, 3);
      console.log(this.vipBook);
      this.vipBookUrl = this.vipBook[0].book_img_url;
    });
    this.$store.dispatch("homes/getDataChange", "畅销书").then((res) => {
      this.changxiaoBook = res.info.slice(0, 3);
      this.changxiaoBookUrl = this.changxiaoBook[0].book_img_url;
    });
    this.$store.dispatch("homes/getDataChange", "男生").then((res) => {
      this.boyBook = res.info.slice(0, 3);
      this.boyBookUrl = this.boyBook[0].book_img_url;
    });
    this.$store.dispatch("homes/getDataChange", "女生").then((res) => {
      this.girlBook = res.info.slice(0, 3);
      this.girlBookUrl = this.girlBook[0].book_img_url;
    });
    this.$store.dispatch("homes/getDataChange", "儿童").then((res) => {
      this.childBook = res.info.slice(0, 3);
      this.childBookUrl = this.childBook[0].book_img_url;
    });
    this.$store.dispatch("homes/getDataChange", "相声说书").then((res) => {
      this.xiangshengBook = res.info.slice(0, 3);
      this.xiangshengBookUrl = this.xiangshengBook[0].book_img_url;
    });
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  // Vue方法定义
  methods: {
    close() {
      this.$router.history.push("/home");
      // this.$router
    },
    closeTitle(path) {
      this.showFlag = true;
      this.hotTitle = path;
      this.$store.dispatch("homes/getDataChange", path).then((res) => {
        this.hotList = res.info.slice(0, 10);
        console.log(this.hotList);
      });
    },
    liClick(item) {
      this.$store.dispatch("bags/getCatalogData", { bookid: item.bookid });
      this.$store.dispatch("bags/bookItem", item);
      this.$router.history.push({
        path: "/details",
        query: {
          path: this.$route.path,
        },
      });
    },
    showBox(classify) {
      this.$store.dispatch("homes/getDataChange", classify).then((res) => {
        // console.log(res.info);
        this.show = true;
        this.alertList = res.info;
        this.alertTitle = classify;
      });
    },
    onClickLeft() {
      this.show = false;
    },
    onClickClose() {
      this.showFlag = false;
    },
    // hotListClick(item) {
    //   this.$store
    //     .dispatch("bags/getCatalogData", { bookid: item.bookid })
    //     .then((res) => {});
    //   this.$router.history.push({
    //     path: "/details",
    //     query: {
    //       path: this.$route.path,
    //     },
    //   });
    // },
  },
};
</script>

<style scoped>
/* @import url(); 引入css类 */
@import url("../../../static/fonts/iconfont.css");
.CF_top {
  width: 100vw;
  height: 44px;
  line-height: 44px;
  /* display: flex; */
}
.CF_top > div:nth-child(1) {
  font-size: 30px;
  float: left;
  margin-left: 10px;
  transform: rotateY(180deg);
}
.CF_top > div:nth-child(2) {
  font-size: 22px;
  color: rgba(16, 16, 16, 100);
  /* font-size: 22px; */
  width: 89px;
  margin: 0 auto;
  font-family: PingFangSC-regular;
}

.CF_List {
  display: flex;
  background-color: #fbfbfb;
  margin-bottom: 10px;
}
.CF_List > div:nth-child(1) img {
  width: 89px;
}
.CF_main {
  padding: 0 16px;
  margin-top: 17px;
}
.CF_box {
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 5;
  overflow-y: auto;
  padding-bottom: 40px;
  background-color: white;
}

.CF_title {
  display: flex;
  margin-bottom: 10px;
  justify-content: space-between;
  line-height: 24px;
}
.CF_title > div:nth-child(1) {
  color: #1c222a;
  font-size: 18px;
  font-family: PingFangSC-bold;
}
.CF_title > div:nth-child(2) {
  color: rgba(61, 70, 85, 100);
  font-size: 14px;
  font-family: PingFangSC-regular;
}
.CF_title > div:nth-child(2) span {
  font-size: 24px;
  float: right;
  color: rgba(198, 201, 204, 100);
}
.CF_right {
  margin-left: 29px;
}
.CF_right > div:nth-child(1) {
  line-height: 25px;
  color: rgba(39, 39, 39, 1);
  font-size: 16px;
  margin-top: 9px;
  font-family: PingFangSC-bold;
}
.CF_right > div:nth-child(2) {
  margin-top: 5px;
  color: rgba(126, 126, 126, 100);
  font-size: 13px;
  line-height: 18px;
  font-family: PingFangSC-regular;
}
.CF_channel {
  padding: 0 12px;
  margin-top: 23px;
}
.CF_Cbottom {
  display: flex;
  flex-wrap: wrap;
  margin-top: 5px;
  justify-content: flex-start;
  align-content:  flex-start;
}
@media screen and (max-width: 321px) {
  .CF_Cbottom > div {
  /* margin: 0 3px 12px; */
  margin:5px 0;
 margin-right: auto;
  margin-left: 0;
  width:calc(100% / 2 - 5px);
  /* float: left; */
  height: 44px;
  line-height: 44px;
  border-radius: 4px;
  background-color: rgba(247, 247, 247, 100);
  text-align: center;
  color: rgba(0, 0, 0, 1);
  font-size: 15px;
  font-family: PingFangSC-regular;
}
}
@media screen and (min-width:321px) and (max-width: 375px) {
  .CF_Cbottom > div {
  /* margin: 0 3px 12px; */
  margin:5px 0;
 margin-right: 3px;
  margin-left: 0;
   width:calc(100% / 3 - 5px);
  /* float: left; */
  height: 44px;
  line-height: 44px;
  border-radius: 4px;
  background-color: rgba(247, 247, 247, 100);
  text-align: center;
  color: rgba(0, 0, 0, 1);
  font-size: 15px;
  font-family: PingFangSC-regular;
}
}
@media screen and (min-width:375px) and (max-width: 413px) {
  .CF_Cbottom > div {
  /* margin: 0 3px 12px; */
  margin:5px 0;
  margin-right: 6.8px;
  margin-left: 0;
  width: 81px;
  /* float: left; */
  height: 44px;
  line-height: 44px;
  border-radius: 4px;
  background-color: rgba(247, 247, 247, 100);
  text-align: center;
  color: rgba(0, 0, 0, 1);
  font-size: 15px;
  font-family: PingFangSC-regular;
}
}
@media screen and (min-width: 413px) and (max-width:450px) {
  .CF_Cbottom > div {
  /* margin: 0 3px 12px; */
  margin:5px 0;
  margin-right: 16.6px;
  margin-left: 0;
  width: 81px;
  /* float: left; */
  height: 44px;
  line-height: 44px;
  border-radius: 4px;
  background-color: rgba(247, 247, 247, 100);
  text-align: center;
  color: rgba(0, 0, 0, 1);
  font-size: 15px;
  font-family: PingFangSC-regular;
}
}
@media screen and (min-width: 450px) and (max-width:768px) {
  .CF_Cbottom > div {
  /* margin: 0 3px 12px; */
  margin:5px 0;
  margin-right: 3px;
  margin-left: 0;
 width:calc(100% / 5 - 5px);
  /* float: left; */
  height: 44px;
  line-height: 44px;
  border-radius: 4px;
  background-color: rgba(247, 247, 247, 100);
  text-align: center;
  color: rgba(0, 0, 0, 1);
  font-size: 15px;
  font-family: PingFangSC-regular;
}
}
@media screen and (min-width: 768px) and (max-width:1024px) {
  .CF_Cbottom > div {
  /* margin: 0 3px 12px; */
  margin:5px 0;
  margin-right: 3px;
  margin-left: 0;
 width:calc(100% / 6 - 5px);
  /* float: left; */
  height: 44px;
  line-height: 44px;
  border-radius: 4px;
  background-color: rgba(247, 247, 247, 100);
  text-align: center;
  color: rgba(0, 0, 0, 1);
  font-size: 15px;
  font-family: PingFangSC-regular;
}
}
 

.BA_ulItem {
  /* width: 2.48rem; */
  width: calc(100vw / 3.2);
  margin-bottom: 0.4rem;
}
.BA_ulItem > div:nth-child(1) {
  text-align: center;
  height: 3.2rem;
}
.BA_ulItem > div:nth-child(1) img {
  width: 2.48rem;
  height: 3.2rem;
  border-radius: 0.133333rem;
}
.BA_ulItem > div:nth-child(2) {
  width: 2.373333rem;
  margin: 0.213333rem auto 0;
  text-align: left;
  /* margin-top: ; */
  font-size: 0.346667rem;
  font-family: PingFangSC-bold;
  font-weight: 600;
  height: 0.986667rem;
  color: #5c5c5c;
}
.BA_ulItem > div:nth-child(3) {
  /* padding-left:.4rem; */
  width: 80px;
  margin: 0.08rem auto 0;
  color: #999999;
  font-size: 0.266667rem;
  /* margin-top: 0.08rem; */
  font-family: PingFangSC-regular;
}
.alertmain {
  display: flex;
  padding: 20px 11px 50px;
  flex-wrap: wrap;
}
.hotmain {
  width: 100vw;
  padding: 0 15px 0 10px;
  margin-top: 10px;
}
.HM_ulItem {
  font-size: 16px;
  display: flex;
  margin-top: 20px;
  margin-left: 10px;
}
.HM_ulItem span {
  margin: 0 15px;
}
.HM_ulItem > div:nth-child(2) img {
  width: 70px;
}
.HM_ulItem > div:nth-child(1) {
  padding-right: 15px;
  padding-top: 30px;
  font-size: 18px;
}
.leftAlert {
  margin-left: 10px;
}
.leftAlert > div:nth-child(2) {
  height: 0.6rem;
  font-size: 15px;
  line-height: 30px;
  margin-bottom: 0.24rem;
  color: #646b77;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.leftAlert > div:nth-child(1) {
  font-size: 17px;
  margin-bottom:2px;
}
.leftAlert > div:nth-child(3) {
  margin-top: 22px;
  color:rgb(122, 120, 120);
}
</style>